<template>
	<div class="brushWordsBox">
		<AppHeader title="刷单词" :banAnimate="true" backgroundColor="transparent" titleColor="#000"
			@leftClickEvent="handleHeaderLeft()">
		</AppHeader>
		<div class="titleBox">
			<div class="block"></div>
			<div class="all">全部</div>
			<div class="remarks">跟读过的单词都记录在这里哦</div>
		</div>
		<Mescroll v-bind="mescrollConfig" class="research-dev-demand-pool__scroll-container" :style="{
		    height: 'calc(100vh - 140px)',
		    position: 'fixed',
		    top: '85px',
		    bottom: 0,
		  }" @init="mescrollInited">
			<div class="wordsList" v-if="wordsList.length>0">
				<div class="wordsItem" v-for="(item,index) in wordsList" :key="index" @click="toWordsDetail(item)">
					{{item.words?item.words:""}}
				</div>
			</div>
			<van-empty v-else description="暂无数据"></van-empty>
		</Mescroll>
		<!-- <div class="fillBox"></div> -->
		<AppLoading v-if="loading" />
		<div class="practiceBox">
			<div class="practice" @click="toPractice">去练习</div>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		ref,
		reactive,
		nextTick,
		onMounted
	} from "vue";

	const handleHeaderLeft = () => {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			window.android.goBack();
		} else if (isiOS) {
			window.webkit.messageHandlers.back.postMessage("")
		}
	}

	//下拉分页相关逻辑
	import Mescroll from "mescroll.js/mescroll.vue";
	import AppLoading from "@/components/AppLoading.vue";
	const loading = ref(false)
	const mescrollInstance = ref(null)
	const mescrollInited = (mescroll) => {
		mescrollInstance.value = mescroll;
	};
	const mescrollConfig = reactive({
		down: {
			use: true,
		},
		up: {
			page: {
				num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
				size: 20 //每页数据条数,默认10
			},
			auto: true,
			isBounce: false,
			htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
			callback: (page) => {
				getBrushWords(page);
			},
		},
	})

	//获取刷单词列表
	import {
		getWordsList
	} from "@/api/brushWords.js";
	const wordsList = ref([])
	const getBrushWords = ({
		num,
		size
	}) => {
		getWordsList({
			page: num,
			limit: size
		}).then(res => {
			if (res.code == 1 && res.data) {
				loading.value = false
				const isNestPage = res.data.length < size;
				if (num === 1) {
					wordsList.value = res.data;
				} else {
					wordsList.value = wordsList.value.concat(res.data);
				}
				let brushWordsList = wordsList.value.map(item => {
					return item.id
				})
				localStorage.setItem("brushWordsList", JSON.stringify(brushWordsList));
				mescrollInstance.value.endSuccess(wordsList.value.length, !isNestPage);
			} else {
				throw res;
			}
		})
	}

	import {
		useRouter,
		useRoute
	} from "vue-router";
	const route = useRoute();
	const router = useRouter();
	//跳转详情页面
	const toWordsDetail = (item) => {
		localStorage.setItem("currentBrushWords", item.id);
		router.push('/brushWords/wordsDetail')
	};
	//返回上一页
	// const handleHeaderLeft = () => {
	// 	router.go(-1);
	// };
	//跳转去练习
	const toPractice = () => {
		router.push('/brushWords/practice')
	}

	onMounted(() => {
		if (route.query.token) { //安卓ios跳转token放在路由上
			localStorage.setItem("h5-token", route.query.token);
		}
		loading.value = true;
	})
</script>

<style lang="scss" scoped>
	.brushWordsBox {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;

		.titleBox {
			display: flex;
			align-items: center;
			padding: 54px 10px 15px;

			.block {
				width: 4px;
				height: 14px;
				background: #0CB76C;
			}

			.all {
				font-weight: bold;
				font-size: 16px;
				color: #333333;
				margin-left: 5px;
			}

			.remarks {
				font-size: 12px;
				color: #8E8E8E;
				margin-left: 5px;
			}
		}

		.wordsList {
			padding: 0 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.wordsItem {
				width: 173px;
				height: 50px;
				background: #FFFFFF;
				border-radius: 5px;
				font-size: 16px;
				line-height: 50px;
				text-align: center;
				color: #666666;
				margin-bottom: 10px;
			}
		}

		.practiceBox {
			height: 65px;
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F5F5F5;

			.practice {
				margin: 0 10px;
				width: 355px;
				height: 45px;
				line-height: 45px;
				background: linear-gradient(270deg, #29F19C 0%, #02A1F9 100%);
				border-radius: 23px;
				text-align: center;
				font-size: 18px;
				color: #FFFFFF;
			}
		}

		.fillBox {
			height: 65px;
		}
	}
</style>